<template>
	<div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>叠加包订单管理</h6>
						<div class="panel-actions">
							<a class="btn-setting" style="color: #fff;">总订单数： {{rowCount}} &nbsp;&nbsp;</a>
						</div>
					</div>

					<div class="panel-body">

						<div style="float: right; margin-bottom: 10px; width: 750px">
							<div class="input-group" style="float: left;width:600px">
								<div class="col-sm-4" style="padding-left: 0">
									<input type="text" class="form-control" placeholder="订单号" v-model="orderId">
								</div>
								<div class="col-sm-4" style="padding-left: 0">
									<input type="text" class="form-control" placeholder="套餐名称" v-model="packagename">
								</div>

								<div class="col-sm-4" style="padding-left: 0">
									<div class="form-group has-feedback">
										<div class="input-group">
													<span class="input-group-addon">
														<i class="fa fa-calendar"></i>
													</span>
											<input type="date"  style="padding: 0;" class="form-control" placeholder="订购日期" v-model="orderdate">
										</div>
									</div>
								</div>
							</div>
							<button type="button" class="btn btn-success" @click="packageSearch">搜索</button>
							<form name="myform" action="../overlayPacket/export" method="post" enctype="multipart/form-data" style="display: inline">
								<button type="submit" class="btn btn-info">导出</button>
							</form>
						</div>
						<div class="clearfix"></div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<th>订单号</th>
                  <th>客户名称</th>
                  <th>套餐</th>
									<th>订单金额</th>
									<th>日期</th>
									<th>备注</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(items, index) in orderPacket.result">
									<td>DJB2016111110{{ items.id }}</td>
									<td>{{ items.customerName }}</td>
									<td>{{ items.overlayPackageName }}</td>
									<td>{{ items.orderPrice }}</td>
									<td>{{ items.orderDate }}</td>
									<td>{{ items.comments }}</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<lsc-page
							mode="event"
							:totalPage="pages"
							:init-page="eventPage"
							:eventFunt="eventFunt"
							:eventParams="eventParams"
						@go-page="goPage"></lsc-page>
		</div>

	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'

	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				orderPacket: 'getOrderPacketList',
				exportPackage: 'getExportPackage'
			}),
			pages () {
				if(this.orderPacket.pageInfo){
					return this.orderPacket.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				eventPage: 1,
				eventFunt: 'fetchOrderPackage',
				eventParams: {},
				orderId: '',
				packagename: '',
				orderdate: '',
				rowCount: 0, // 总订单数
			}
		},
		methods: {

			goPage (data) {
				this.eventPage = data.page
			},

			// 查询
			packageSearch () {

				let orderIDS = this.orderId.substring(12)
				let params = {
					page: 1,
					id: orderIDS,  // 订单号
					packageName: this.packagename,  // 套餐名称
					orderDate: this.orderdate  // 订购日期
				}
				this.eventParams.id = orderIDS
				this.eventParams.packageName = this.packagename
				this.eventParams.orderDate = this.orderdate
				this.$store.dispatch('fetchOrderPackage', params)
			},

			// 导出
			exportData () {
				let params = {
					id: this.orderId.substring(12),  // 订单号
					packageName: this.packagename,  // 套餐名称
					orderDate: this.orderdate  // 订购日期
				}
				this.$store.dispatch('fetchExportPackage', params)
			}
		},
		created () {

		},
		mounted () {

			this.$store.dispatch('fetchOrderPackage', {page: 1})

		},
		components: {
			LscPage
		},
		watch: {
			orderPacket (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
				this.rowCount = newVal.pageInfo.rowCount
			}
		}
	}
</script>

<style>

</style>
